<template>
  <el-container style="height: 100%;">
    <el-header>
      <div>
        <img src="../assets/css/images/logo2.png" alt="" />
        <span>教学资源管理系统&nbsp;&nbsp;<small>文件分享</small></span>
      </div>
      <el-dropdown>
        <el-avatar
          :src="require('../assets/css/images/panda.jpg')"
          style="margin-right: 20px"
        ></el-avatar>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="gohome()">返回首页</el-dropdown-item>
          <el-dropdown-item @click.native="logoutPtf()"
            >退出控制台</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <el-container>
      <!-- 主体 -->
      <el-main>
        <el-table
          :data="shareTableData"
          :stripe="true"
          :header-cell-style="{ background: '#FAFAFA' }"
        >
          <el-table-column prop="oldname" label="文件名" sortable width="300">
            <template slot-scope="scope" class="rowText">
              <div class="icon">
                <svg class="icons" aria-hidden="true">
                  <use v-bind:xlink:href="scope.row.icon"></use>
                </svg>
              </div>
              <div class="text">
                <b
                  class="rowname"
                  @click="preview(scope.row)"
                  style="margin-left:5px;cursor:pointer"
                >
                  {{ scope.row.oldname }}</b
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="文件大小"> </el-table-column>
          <el-table-column prop="type" label="文件类型"></el-table-column>
          <el-table-column prop="owner" label="创建人"> </el-table-column>
          <el-table-column prop="uploadtime" label="日期"> </el-table-column>

          <!-- 操作按钮 -->
          <el-table-column label="操作" width="240">
            <template slot-scope="scope">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                @click="download(scope.row)"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <p>{{ key }}</p> -->
        <div class="dialog">
          <el-dialog
            title="文件提取"
            :visible.sync="codeDialog"
            :close-on-click-modal="false"
            width="30%"
            :show-close="false"
          >
            <el-form>
              <el-form-item
                required
                label="提取码："
                :rules="[{ type: 'number', message: '提取码必须为数字值' }]"
              >
                <el-input v-model="confirmForm.code"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="codeConfirm">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
const axios = require("axios");
export default {
  name: "sharePage",
  data() {
    return {
      shareTableData: [
        {
          id: "1",
          uploadtime: "2022-05-02",
          oldname: "Resource_Systems.pdf",
          type: "pdf",
          owner: "admin",
          size: "2568KB",
          icon: "#icon-pdf",
        },
        {
          id: "2",
          uploadtime: "2022-03-04",
          oldname: "毕业设计开题报告.doc",
          type: "doc",
          owner: "admin",
          size: "168KB",
          icon: "#icon-WORD",
        },
        {
          id: "3",
          uploadtime: "2022-03-01",
          oldname: "系统流程图.vsd",
          type: "vsd",
          owner: "admin",
          size: "68KB",
          icon: "#icon-vsd",
        },
        {
          id: "4",
          uploadtime: "2022-04-03",
          oldname: "compressed_tracemonkey.ppt",
          type: "ppt",
          owner: "admin",
          size: "1648KB",
          icon: "#icon-ppt",
        },
        {
          id: "5",
          uploadtime: "2022-03-13",
          oldname: "2022毕业设计相关文档模板.zip",
          type: "zip",
          owner: "admin",
          size: "708KB",
          icon: "#icon-yasuobao",
        },
        {
          id: "6",
          uploadtime: "2022-04-01",
          oldname: "movie.mp4",
          type: "mp4",
          owner: "admin",
          size: "168KB",
          src: "https://www.runoob.com/try/demo_source/movie.mp4",
          icon: "#icon-shipin",
        },
        {
          id: "7",
          uploadtime: "2022-04-01",
          oldname: "说明文档.md",
          type: "md",
          owner: "admin",
          size: "168KB",
          src: "https://www.runoob.com/try/demo_source/movie.mp4",
          icon: "#icon-md",
        },
        {
          id: "8",
          uploadtime: "2022-04-01",
          oldname: "毕业生人员表.xlsx",
          type: "xlsx",
          owner: "admin",
          size: "168KB",
          src: "https://www.runoob.com/try/demo_source/movie.mp4",
          icon: "#icon-excel-ext",
        },
        {
          id: "9",
          uploadtime: "2022-04-01",
          oldname: "system.exe",
          type: "exe",
          owner: "admin",
          size: "168KB",
          icon: "#icon-exe",
        },
      ],
      tableData: {},
      key: "",
      form: {
        // id: "",
        url: "",
      },
      confirmForm: {
        id: "",
        code: "",
      },
      oldname: "",
      codeDialog: false,
    };
  },
  created() {
    // if (window.sessionStorage.getItem("fileList") != {}) {
    //   this.tableData = window.sessionStorage.getItem("fileList");
    // } else {
    // if (localStorage.getItem("code")) {
    this.key = localStorage.getItem("code");
    // localStorage.clear();
    // }
    // 分享文件的id
    this.confirmForm.id = this.$route.query.id;
    // console.log("id:", this.confirmForm.id);
    this.form.url = localStorage.getItem("url");
    var current = new Date();
    let time = localStorage.getItem("time") - current;
    // console.log(time);
    setTimeout(() => {
      localStorage.clear();
      this.$message.error("分享链接已过期！");
    }, time);
    // console.log(this.key);
    // 无提取码
    if (this.key != "") this.codeDialog = true;
    this.$http
      .post(`${this.systemURL}/userFile/queryFileByUrl`, this.form)
      .then((res) => {
        console.log(res.data.data);
        this.shareTableData = res.data.data;
        // console.log("数据:", this.tableData);
        // this.shareTableData = [{}]
      });
    // }
  },
  methods: {
    codeConfirm() {
      console.log("提取验证表单", this.confirmForm);
      axios({
        method: "post",
        url: `${this.systemURL}/userFile/shareYZ`,
        params: {
          id: this.confirmForm.id,
          code: this.confirmForm.code,
        },
      }).then((res) => {
        console.log("验证信息：", res);
        if ((res.data = true)) {
          this.codeDialog = false;
        }else {
        this.$message.error("提取码错误！");
      }
      });
      // if (this.confirmForm.code == this.key) {
      //   this.codeDialog = false;
      //   console.log(this.form);
      // } else {
      //   this.$message.error("提取码错误！");
      // }

      // this.shareTableData = window.sessionStorage.getItem("shareDetail");
    },
    // logoutPtf() {
    //   this.$router.push("/system");
    // },
    download(item) {
      // console.log(item);
      axios({
        method: "post",
        url: `${this.systemURL}/userFile/download`,
        data: {
          id: item.id,
        },
        responseType: "blob",
      }).then((res) => {
        console.log(res);
        let blob = new Blob([res.data]);
        let downloadElement = document.createElement("a");
        let href = window.URL.createObjectURL(blob); //创建下载的链接
        console.log(href);
        downloadElement.href = href;
        downloadElement.download = item.oldname; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    // gohome() {
    //   //清空token
    //   window.sessionStorage.clear();
    //   this.$router.push("/home");
    // },
    preview(row) {
      console.log(row.url);
      window.open("http://192.168.43.56:8012/onlinePreview?url=" + row.url);
    },
  },
};
</script>

<style lang="less" scoped>
.dialog /deep/ .el-dialog__wrapper {
  background-color: rgba(0, 0, 0, 0.8);
}
.cardimgs {
  width: 64px;
  height: 64px;
}
.card {
  height: 300px;
  border-radius: 3%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 400px;
}
.el-header {
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  border-bottom: 2px solid #dfe2e4;
  background-color: #fcfcfc;
  align-items: center;
  color: rgb(0, 0, 0);
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    span {
      margin-left: 15px;
    }
    small {
      font-size: 14px;
    }
  }
}
.fileimg {
  width: 40px;
  height: 37px;
}
.rowText {
  display: table-cell;
  text-align: center;
}
.icons {
  width: 35px;
  height: 32px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon,
.text {
  display: table-cell;
  vertical-align: middle;
  margin-right: 5px;
}
.opbutton {
  display: table-cell;
  vertical-align: middle;
  margin-right: 15px !important;
}
.share {
  opacity: 1;
  display: table-cell;
  vertical-align: middle;
  > .shareimg {
    width: 25px;
    height: 30px;
  }
}
// .share:hover{
//   opacity: 1;
// }
.svg {
  width: 100px;
}
</style>
